<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/default.css">
    <script src="/js/bootstrap-treeview.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
<div class="bs-example" data-example-id="striped-table">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        </thead>
        <tbody id="tbody">

        </tbody>

    </table>
</div>
<!-- Button trigger modal -->
<!--<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">授权</button>-->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">角色授权</h4>
            </div>
            <div class="modal-body">
                <div class="col-sm-4">
                    <h2>Tree</h2>
                    <div id="treeview-checkable" class="treeview"><ul class="list-group"><li class="list-group-item node-treeview-checkable search-result" data-nodeid="0" style="color:#D9534F;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon check-icon glyphicon glyphicon-unchecked"></span>Parent 1</li><li class="list-group-item node-treeview-checkable" data-nodeid="1" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon check-icon glyphicon glyphicon-unchecked"></span>Child 1</li><li class="list-group-item node-treeview-checkable" data-nodeid="4" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon check-icon glyphicon glyphicon-unchecked"></span>Child 2</li><li class="list-group-item node-treeview-checkable" data-nodeid="5" style="color:undefined;background-color:undefined;"><span class="icon glyphicon"></span><span class="icon check-icon glyphicon glyphicon-unchecked"></span>Parent 2</li><li class="list-group-item node-treeview-checkable" data-nodeid="6" style="color:undefined;background-color:undefined;"><span class="icon glyphicon"></span><span class="icon check-icon glyphicon glyphicon-unchecked"></span>Parent 3</li><li class="list-group-item node-treeview-checkable" data-nodeid="7" style="color:undefined;background-color:undefined;"><span class="icon glyphicon"></span><span class="icon check-icon glyphicon glyphicon-unchecked"></span>Parent 4</li><li class="list-group-item node-treeview-checkable node-selected" data-nodeid="8" style="color:#FFFFFF;background-color:#428bca;"><span class="icon glyphicon"></span><span class="icon check-icon glyphicon glyphicon-unchecked"></span>Parent 5</li></ul></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    function queryModule(rid){
        console.log(rid);
        $.post("/role/listmodules",{roleId:rid},function (defaultData) {
            console.log(defaultData);
            var $checkableTree = $('#treeview-checkable').treeview({
                data: defaultData,
                showIcon: false,
                showCheckbox: true,
                onNodeChecked: function(event, node) {
                    console.log(rid+"---"+node.code);
                    $.post("/role/grant",{roleid:rid,moduleCode:node.code},function(){})
                },
                onNodeUnchecked: function (event, node) {
                    console.log(rid+"---"+node.code);
                    $.post("/role/del",{roleid:rid,moduleCode:node.code},function(){})
                }
            });
        },"json")
    }


        $(function() {
        $.post("/role/list",function (data) {
            console.log(data);
            for(var i =0;i<data.length;i++){
                var trStr = "<tr><td><button type=\"button\" onclick='queryModule("+data[i].roleCode+")' class=\"btn btn-primary btn-lg\" data-toggle=\"modal\" data-target=\"#myModal\">授权</button>\n</td>" +
                    "<td>"+data[i].roleCode+"</td>" +
                    "<td>"+data[i].roleName+"</td>" +
                    "<td>"+data[i].roleDesc+"</td></tr>"
                $("#tbody").append(trStr);
            }
        },"json");


        // var $searchableTree = $('#treeview-searchable').treeview({
        //     data: defaultData
        // });
        //
        //
        // var findCheckableNodess = function() {
        //     return $checkableTree.treeview('search', [ $('#input-check-node').val(), { ignoreCase: false, exactMatch: false } ]);
        // };
        // var checkableNodes = findCheckableNodess();
        //
        // // Check/uncheck/toggle nodes
        // $('#input-check-node').on('keyup', function (e) {
        //     checkableNodes = findCheckableNodess();
        //     $('.check-node').prop('disabled', !(checkableNodes.length >= 1));
        // });
        //
        // $('#btn-check-node.check-node').on('click', function (e) {
        //     $checkableTree.treeview('checkNode', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
        // });
        //
        // $('#btn-uncheck-node.check-node').on('click', function (e) {
        //     $checkableTree.treeview('uncheckNode', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
        // });
        //
        // $('#btn-toggle-checked.check-node').on('click', function (e) {
        //     $checkableTree.treeview('toggleNodeChecked', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
        // });
        //
        // // Check/uncheck all
        // $('#btn-check-all').on('click', function (e) {
        //     $checkableTree.treeview('checkAll', { silent: $('#chk-check-silent').is(':checked') });
        // });
        //
        // $('#btn-uncheck-all').on('click', function (e) {
        //     $checkableTree.treeview('uncheckAll', { silent: $('#chk-check-silent').is(':checked') });
        // });

    });
</script>
</body>
</html>